<template>
	
	<scroll-view class="scroll" scroll-y="true" scroll-with-animation :scroll-into-view="scrollId">
		
		<view v-for="(item) in bar" :key="item.letter" class="box" :id="item.letter" >
			<text>{{item.letter}}</text>
			<view class="item" v-for="(item,index) in item.data" :key="index" @click="handleItem(item)">
				<image :src="item.logo" mode=""></image>
				<text>{{item.name}}</text>
			</view>
			
		</view>
	</scroll-view>
	<view class="right-bar">
		<text v-for="(item,index) in bar" :key="index" @tap.stop="handleClick(item.letter)">{{item.letter}}</text>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		carInfoSave,
		carLicenceOcr,
		carQueryBrand
	} from '@/api'
	import {
		onLoad,
		onReachBottom,
		onShow,
	} from '@dcloudio/uni-app'
	const scrollId = ref('')
	const bar = ref([
		{letter:'A',data:[]},
		{letter:'B',data:[]},
		{letter:'C',data:[]},
		{letter:'D',data:[]},
		{letter:'E',data:[]},
		{letter:'F',data:[]},
		{letter:'G',data:[]},
		{letter:'H',data:[]},
		{letter:'I',data:[]},
		{letter:'J',data:[]},
		{letter:'K',data:[]},
		{letter:'L',data:[]},
		{letter:'M',data:[]},
		{letter:'N',data:[]},
		{letter:'O',data:[]},
		{letter:'P',data:[]},
		{letter:'Q',data:[]},
		{letter:'R',data:[]},
		{letter:'S',data:[]},
		{letter:'T',data:[]},
		{letter:'U',data:[]},
		{letter:'V',data:[]},
		{letter:'W',data:[]},
		{letter:'X',data:[]},
		{letter:'Y',data:[]},
		{letter:'Z',data:[]},
	])
	
	
	onLoad(async()=>{
		const res  = await carQueryBrand()
		
		bar.value.map(item=>{
			res.result.map(data=>{
				if(item.letter == data.initial){
					item.data.push(data)
				}
			})
		})
		
		
		
	})
	const handleClick = (item)=>{
		scrollId.value = item
	}
	const handleItem = (item)=>{
		uni.$emit('selectBrand',item)
		uni.navigateBack()
	}
</script>

<style lang="scss">
	page {
		background: #F8F5F0;
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	}
	.scroll{
		height: 100vh;
		.box{
			>text{
				display: block;
				height: 80rpx;
				padding-left: 40rpx;
				
				line-height: 80rpx;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.item{
			height: 100rpx;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #f2f2f2;
			width: 630rpx;
			margin: 0 auto;
			image{
				display: block;
				width: 60rpx;
				height: 60rpx;
				margin-right: 30rpx;
			}
			text{
				font-size: 28rpx;
				color: #333;
			}
		}
	}
	.right-bar{
		position: fixed;
		right: 30rpx;
		height: 70vh;
		top: 15vh;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		text{
			display: block;
			text-align: center;
			font-size: 30rpx;
			color: #333;
			width: 60rpx;
			height: 50rpx;
			line-height: 50rpx;
		}
	}

</style>
